<h1>Add Customer</h1>

<form class="form-horizontal" role="form" ng-submit="submitCustomer()" novalidate>
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">First Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstname" 
             ng-model="customer.firstname" name="firstname" placeholder="Your first name">
    </div>
  </div>
  <div class="form-group">
    <label for="lastname" class="col-sm-2 control-label">Last Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="lastname"
             ng-model="customer.lastname" name="lastname" placeholder="Your last name">
    </div>
  </div>
  <div class="form-group">
    <label for="street" class="col-sm-2 control-label">Street</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="street"
             ng-model="customer.address.street" name="street" placeholder="Street">
    </div>
  </div>
  <div class="form-group">
    <label for="city" class="col-sm-2 control-label">City</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="city"
             ng-model="customer.address.city" name="city" placeholder="City">
    </div>
  </div>
  <div class="form-group">
    <label for="zipCode" class="col-sm-2 control-label">ZIP Code</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="zipCode"
             ng-model="customer.address.zipCode" name="zipCode" placeholder="ZIP or Postal Code">
      <button type="button" class="btn btn-default" ng-click="geocodeAddress()">Geocode Address</button>
    </div>
  </div>
  <div class="form-group">
    <label for="latitude" class="col-sm-2 control-label">Latitude</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="latitude" required
             ng-model="customer.address.location.latitude" name="latitude" placeholder="Latitude">
      <button type="button" class="btn btn-default" ng-click="getMyLocation()">Get My Location</button>
      <button type="button" class="btn btn-default" ng-click="reverseGeocodeCoordinates()">Populate Address</button>
    </div>
  </div>
  <div class="form-group">
    <label for="longitude" class="col-sm-2 control-label">Longitude</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="longitude" required
             ng-model="customer.address.location.longitude" name="longitude" placeholder="Longitude">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="button" class="btn btn-default" ng-click="goBack()">Cancel</button>
      <button type="submit" class="btn btn-default">Add Customer</button>
    </div>
  </div>
</form>

<pre>{{customer}}</pre>
<google-map center="map.center" zoom="map.zoom" draggable="true" events="map.events">
  <marker coords="customer.address.location"></marker>
</google-map>
